<template>
    <div>
        <el-form label-width="80px">
            <el-form-item label="时间范围">
                <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button @click="search" type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <LineChart :xData="xData" :yData="yData" title="订单折线图"></LineChart>
        </div>
    </div>
</template>

<script>
import LineChart from '@/components/line/LineChart.vue';
import { ordertotalReq } from '@/api/order.api'
import dayjs from 'dayjs';
export default {
    components: {
        LineChart
    },
    data() {
        return {
            xData: [],
            yData: [{
                name: '订单量', data: []
            }],
            date: ''
        }
    },
    methods: {
        search() {
            console.log(this.date);
            if (this.date) {
                this.date = JSON.stringify(this.date.map(item => dayjs(item).format('YYYY-MM-DD HH:mm:ss')))
                this.ordertotal(this.date)
                this.date = ''

            } else {
                this.$message.error('请输入时间范围')
            }
        },
        ordertotal() {
            ordertotalReq(this.date).then(res => {
                console.log(res);
                this.xData = res.data.data.map(item => dayjs(item.orderTime).format('YYYY-MM-DD HH:mm:ss'))
                this.yData[0].data = res.data.data.map(item => item.orderAmount)
            })
        }
    },
    created() {
        this.ordertotal()
    }
}
</script>

<style lang="less" scoped>
div {
    width: 100%;
    height: 100%;
}
</style>